<template>
    <view class="goods-info">
        <view class="info-content">
            <view class="b-info">
                <goodsInfoImg
                    :goodImg="goodImg"
                    :goodBigImg="goodBigImg"
                    @showCustmInfo="showCustmInfo"
                    @lookBigImg="lookBigImg"
                    :isNotData="isNotData"
                >
                </goodsInfoImg>
                <view
                    class="overflow-box"
                    id="imgsBox"
                    :style="{ height: `calc(100vh - ${boxHeight}px)` }"
                    v-show="!isNotData"
                >
                    <goodsInfoBox
                        :goodInfo="goodInfo"
                        :qty="qty"
                        :tplinfo="tplinfo"
                        @gdStoreWin="gdStoreWin"
                        @getsaleDataFun="getsaleDataFun"
                    ></goodsInfoBox>
                    <goodsInfoTxt :goosDesc="goosDesc"></goodsInfoTxt>
                </view>
                <goodsFixedBottom
                    :goodId="goodId"
                    :isEdit="isEdit"
                    :isDel="isDel"
                    v-show="!isNotData"
                ></goodsFixedBottom>
                <empty class="empty-p-style" v-if="isNotData"></empty>
            </view>
            <view class="c-info" v-show="!isNotData && showInfo">
                <customerInfo
                    :goodInfo="goodInfo"
                    :goodInfo2="goodInfo2"
                    @showCustmInfo="showCustmInfo"
                ></customerInfo>
            </view>
        </view>
        <bigImageMask ref="setBigImage"></bigImageMask>

        <popsellWin ref="popsellWin" :goodInfo="goodInfo"></popsellWin>
    </view>
</template>

<script>
import eventCtrl from "../../js/event/EventCtrl.js";
import ordertoptitle from "../bills/OrderTopTitle.vue";
import goodsInfoImg from "./GoodsInfoImg.vue";
import goodsInfoBox from "./GoodsInfoBox.vue";
import goodsInfoTxt from "./GoodsInfoTxt";
import goodsFixedBottom from "./GoodsFixedBottom.vue";
import customerInfo from "./GoodsCustomerInfo.vue";
import popsellWin from "../comm/popsellWin.vue";

import empty from "../comm/empty.vue";

import config from "../../js/conf/Config.js";
import bigImageMask from "./bigImageMask.vue";

import accessCtrl from "../../js/limit/AccessCtrl.js";

import https from "../../js/https/Https.js";

import cmd from "../../js/Cmd.js";

import util from "../../js/util/Util.js";

let time = 200; //延时器触发时间
let footBtn = 60; //底部按钮容器高度
export default {
    props: ["isNotData"],
    components: {
        ordertoptitle,
        goodsInfoImg,
        goodsInfoBox,
        goodsInfoTxt,
        goodsFixedBottom,
        customerInfo,
        bigImageMask,
        empty,
        popsellWin,
    },
    data() {
        return {
            title: "服务详情",
            showInfo: false,
            customer_info: {},
            address: {},
            orderInfos: {},
            goodId: "", //服务ID
            goodInfo: {}, //服务详情(编辑用的)
            goodInfo2: {}, //服务详情
            qty: 0, //库存
            goodImg: [], //服务详情图片组
            goodBigImg: [], //服务详情图片组大图
            goosDesc: [], //详情数据
            boxHeight: 111, //#imgsBox容器初始化高度
            isEdit: false, //是否可以编辑服务
            isDel: false, //是否可以删除服务
            tplinfo: {}, //权限
            showMore: false, //显示更多
            goodEditInfo: {}, //编辑的详情
        };
    },
    methods: {
        getsaleDataFun(type) {
            const data = {
                type,
                list_api:
                    type == 1
                        ? config.YY_GOODSINFO_GOODS_SELL
                        : type == 2
                        ? config.YY_GOODSINFO_GOODS_SELL_MOUTH
                        : config.YY_GOODSINFO_CUSTOM_SELL,
                custom_api: config.YY_GOODSINFO_CUSTOM_SELL_CUSTOM,
            };
            this.$refs.popsellWin.initData(data);
        },
        /******修改库存更新*****/
        editQtyNumUpdate(value) {
            let bool = false;
            let num = 0;
            if (this.qty < value) {
                bool = true;
                num = value - this.qty;
            } else {
                num = this.qty - value;
            }
            this.$emit("editQtyNumUpdate", num, bool);
            this.qty = value;
        },

        /*** 设置  #imgsBox 的高度***/
        getBoxHeight() {
            this.removeEvent();
            const query = uni.createSelectorQuery().in(this);
            query
                .select("#imgsBox")
                .boundingClientRect((data) => {
                    this.boxHeight = data.top + footBtn;
                })
                .exec();
            this.addEvent();
        },

        /***关闭客户详情**/
        showCustmInfo() {
            this.showInfo = !this.showInfo;
            cmd.external(cmd.CMD_SHOW_MORE, this.showInfo);
            setTimeout(this.getBoxHeight, 15);
        },

        /*** 获取服务详情数据  GD_INFO  ***/
        async loadGoodsInfo(id, isUpdate = false) {
            if (!id) return;
            let that = this;
            this.isDel = await accessCtrl.getGdsDelLimit();
            this.isEdit = await accessCtrl.getGdsEditLimit();
            let param = {};
            param.gdid = id;
            https.loadprojectInfo(param, back);
            function back(data) {
                if (data) {
                    if (data.gd_info) {
                        that.goodInfo = data.gd_info;
                        if (that.goodInfo.costInfo) {
                            let unitList = util.removeDuplicate(
                                that.goodInfo.costInfo,
                                "unitid"
                            ); //根据成本，单位去重
                            that.goodInfo.unitList = unitList;
                        }
                        that.goosDesc = that.goodInfo.desc;
                        that.goodInfo2 = data.gd_info;
                        that.goodImg = that.goodInfo2.imgs_s;
                        that.goodBigImg = that.goodInfo2.imgs;
                        that.goodId = that.goodInfo2.id;
                        that.qty = data.gd_info.qty;
                    }
                    if (data.tpl_info) {
                        that.tplinfo = data.tpl_info;
                    }
                    setTimeout(() => {
                        that.getBoxHeight();
                    }, time);

                    if (isUpdate) {
                        let obj = {};
                        obj.id = that.goodInfo.id;
                        obj.imgs =
                            that.goodInfo.imgs_s && that.goodInfo.imgs_s[0]
                                ? that.goodInfo.imgs_s[0]
                                : "";
                        obj.title = that.goodInfo.title;
                        obj.qty = that.goodInfo2.qty;

                        let tArr = [];
                        if (that.goodInfo.istop != 0) {
                            let aOnsale = {};
                            aOnsale.title = "置顶";
                            aOnsale.type = 0;
                            aOnsale.istop = that.goodInfo.istop != 0 ? 1 : 0;
                            tArr.push(aOnsale);
                        }
                        if (that.goodInfo.onsale == 1) {
                            //处理app上架在标签处显示
                            let aOnsale = {};
                            aOnsale.title = "上架";
                            aOnsale.type = 0;
                            aOnsale.onsale = '1';
                            tArr.push(aOnsale);
                        } else {
                            let aOnsale = {};
                            aOnsale.title = "下架";
                            aOnsale.type = 0;
                            aOnsale.onsale = '2';
                            tArr.push(aOnsale);
                        }
                        if (that.goodInfo.onsale_yd == 1) {
                            //处理云店在标签处显示
                            let yOnsale = {};
                            yOnsale.type = 1;
                            let arr = that.goodInfo.onsale_yds;
                            if (arr && arr.length > 0) {
                                let onSaleArr = [];
                                for (let i = 0; i < arr.length; i++) {
                                    let obj = arr[i];
                                    if (obj.onsale_yd == 1) {
                                        let o = {};
                                        o.title = obj.name_rel;
                                        o.id = obj.idyun;
                                        onSaleArr.push(o);
                                    }
                                }
                                yOnsale.yunLs = onSaleArr;
                                yOnsale.title = "云店" + onSaleArr.length;
                                tArr.push(yOnsale);
                            }
                        }

                        if (that.goodInfo.tags_title) {
                            //处理标签
                            let arr = that.goodInfo.tags_title.split(",");
                            for (let i = 0; i < arr.length; i++) {
                                let tObj = {};
                                tObj.type = 0;
                                tObj.title = arr[i];
                                tArr.push(tObj);
                            }
                        }
                        obj.tagsInfo = tArr;

                        obj.price = that.goodInfo.price_bw;
                        that.$emit("updateListData", obj);
                    }
                }
            }
        },
        /****服务库存窗口****/
        gdStoreWin() {},

        lookBigImg(data, index) {
            this.$refs.setBigImage.toggleBillsStateMask("show", data, index);
        },

        addEvent() {
            uni.$on(eventCtrl.CHANGE_SIZE_EVENT, this.getBoxHeight);
        },

        removeEvent() {
            uni.$off(eventCtrl.CHANGE_SIZE_EVENT);
        },
    },
    mounted() {
        this.addEvent();
    },
};
</script>
<style lang="scss">
.goods-info {
    flex: 1;
    margin-left: 345px;
    height: 100vh;
    background-color: #fff;
    .overflow-box {
        overflow-y: auto;
        // height: calc(100vh - 171px);
        button {
            margin: 10px 0;
            background: #007aff;
            color: #fff;
            font-size: 20px;
        }
    }
    .overflow-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }
    .overflow-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .overflow-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
    .info-content {
        display: flex;
        // align-items: center;
        // justify-content: flex-start;
    }
    .b-info {
        // padding-right: 310px;
        // margin-right: 310px;
        width: 100%;
        height: 100%;
        border-right: 1px solid #ececec;
        background: #fff;
        .empty-p-style {
            padding-top: 110px;
        }
    }

    .c-info {
        // width: 310px;
        // height: 100%;
    }
}
</style>